import {Component} from 'react';
import {Modal, Form, Input} from 'antd';

const FormItem = Form.Item;

class UserEditComp extends Component {

  constructor(props) {
    super(props);
  }

  okHandler = () => {
    const {onOk} = this.props;
    const {form} = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onOk(values);
        form.resetFields();
        this.props.onHideHandler();
      }
    });
  };

  onHideHandler = () => {
    this.props.form.resetFields();
    this.props.onHideHandler();
  }

  render() {
    const {getFieldDecorator} = this.props.form;
    const {id, name, email, website} = {...this.props.record};
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };

    return (
      <span>
        <Modal
          title="Edit User"
          visible={this.props.visibled}
          onOk={this.okHandler}
          onCancel={this.onHideHandler}
        >
          <Form horizontal="true" onSubmit={this.okHandler}>
            <FormItem
              {...formItemLayout}
              label="Id">
              {
                getFieldDecorator('id', {
                  initialValue: id,
                })(<Input/>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="Name"
            >
              {
                getFieldDecorator('name', {
                  initialValue: name,
                })(<Input/>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="Email"
            >
              {
                getFieldDecorator('email', {
                  initialValue: email,
                })(<Input/>)
              }
            </FormItem>
            <FormItem
              {...formItemLayout}
              label="Website"
            >
              {
                getFieldDecorator('website', {
                  initialValue: website,
                })(<Input/>)
              }
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}

export default Form.create()(UserEditComp);
